<template>
  <t-card>
    <t-form :data="formData" :rules="FORM_RULES" style="width: 500px" label-width="120px" @submit="onSubmit">
      <t-form-item :label="t('pages.siteSetting.title')" prop="siteTitle" name="siteTitle">
        <t-input v-model.trim="formData.siteTitle" maxlength="30" show-limit-number />
      </t-form-item>
      <t-form-item :label="t('common.seoTitle')" name="seoTitle">
        <t-textarea
          v-model.trim="formData.seoTitle"
          maxlength="256"
          resize="none"
          show-limit-number
          :autosize="{ minRows: 2, maxRows: 5 }"
        />
      </t-form-item>
      <t-form-item :label="t('common.seoKeyword')" name="seoKeywords">
        <t-textarea
          v-model.trim="formData.seoKeywords"
          maxlength="256"
          resize="none"
          show-limit-number
          :autosize="{ minRows: 2, maxRows: 5 }"
        />
      </t-form-item>
      <t-form-item :label="t('common.seoDescription')" name="seoDescription">
        <t-textarea
          v-model.trim="formData.seoDescription"
          maxlength="256"
          resize="none"
          show-limit-number
          :autosize="{ minRows: 2, maxRows: 5 }"
        />
      </t-form-item>
      <t-form-item>
        <t-button theme="primary" type="submit">{{ t('common.submit') }}</t-button>
      </t-form-item>
    </t-form>
  </t-card>
</template>

<script setup lang="ts">
import { SubmitContext } from 'tdesign-vue-next';
import { onMounted, ref } from 'vue';

import $api from '@/api';
import { t } from '@/locales';

import { FORM_DATA, FORM_RULES } from './constants';

const formData = ref({ ...FORM_DATA });
const fields = ref([]);
const getInfo = async () => {
  const res = await $api.site.setting.list({ type: 0 });
  fields.value = res;
  res.forEach((v: Recordable) => {
    formData.value[v.name] = v.value;
  });
};

const onSubmit = (context: SubmitContext) => {
  if (context.validateResult) {
    // MessagePlugin.success('提交成功');
    fields.value.forEach((v) => {
      v.value = formData.value[v.name];
    });
    $api.site.setting.update({ fields: fields.value });
  }
};

onMounted(() => {
  getInfo();
});
</script>
